<template>
    <div class="home">
        <MyTitle title="首页"></MyTitle>
        <el-row class="homerow">
            <el-col :span="11" class="homecol">

                <div class="chartbox" ref="chartone"></div>
            </el-col>
            <el-col :span="11" class="homecol">
                <div class="chartbox" ref="charttwo"></div>
            </el-col>
        </el-row>

        <el-row class="homerow">
            <el-col :span="11" class="homecol">
                <EchartMap :option="option2" />
            </el-col>
            <el-col :span="11" class="homecol">
                <EchartMap :option="option3" />
            </el-col>
        </el-row>
    </div>
</template>


<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import EchartMap from './EchartMap.vue'
const chartone = ref<any>()
const charttwo = ref<any>()
const chartOneInit = () => {

    var myChart = echarts.init(chartone.value);
    var option = {
        title: {
            text: '计算机191迟到人员分析'
        },
        tooltip: {},
        legend: {
            data: ['次数']
        },
        xAxis: {
            data: ['李白', '王维', '白居易', '杜甫', '孟浩然', '欧阳修', '王勃']
        },
        yAxis: {},
        series: [
            {
                name: '次数',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20, 50]
            }
        ]
    };


    myChart.setOption(option);
}


const chartTwoInit = () => {

    var myChart = echarts.init(charttwo.value);

    var option = {
        title: {
            text: '人员比例分析',
            subtext: '假数据',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '学员' },
                    { value: 735, name: '班主任' },
                    { value: 580, name: '讲师' },
                    { value: 484, name: '主管' },
                    { value: 300, name: '校长' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };


    myChart.setOption(option);
}

const option2 = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    title: {
        text: 'Gradient Stacked Area Chart'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Line 1',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(128, 255, 165)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(1, 191, 236)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
        },
        {
            name: 'Line 2',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(0, 221, 255)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(77, 119, 255)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [120, 282, 111, 234, 220, 340, 310]
        },
        {
            name: 'Line 3',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(55, 162, 255)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(116, 21, 219)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [320, 132, 201, 334, 190, 130, 220]
        },
        {
            name: 'Line 4',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(255, 0, 135)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(135, 0, 157)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [220, 402, 231, 134, 190, 230, 120]
        },
        {
            name: 'Line 5',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            label: {
                show: true,
                position: 'top'
            },
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(255, 191, 0)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(224, 62, 76)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: [220, 302, 181, 234, 210, 290, 150]
        }
    ]
};

const option3 = {
    title: {
        text: 'Basic Radar Chart'
    },
    legend: {
        data: ['伤害比', 'Actual Spending']
    },
    radar: {

        indicator: [
            { name: '中单', max: 6500 },
            { name: '打野', max: 16000 },
            { name: '上单', max: 30000 },
            { name: '射手', max: 38000 },
            { name: '辅助', max: 52000 },
            { name: '教练', max: 25000 }
        ]
    },
    series: [
        {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
                {
                    value: [4200, 3000, 20000, 35000, 50000, 18000],
                    name: 'Allocated Budget'
                },
                {
                    value: [5000, 14000, 28000, 26000, 42000, 21000],
                    name: 'Actual Spending'
                }
            ]
        }
    ]
};
onMounted(() => {
    chartOneInit()
    chartTwoInit()
})
</script>

<style lang="scss" scoped>
.homerow {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    padding-bottom: 10px;

    .homecol {
        height: 400px;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 10px;

        .chartbox {
            width: 100%;
            height: 100%;
        }
    }
}
</style>